<template>
	<view>
		<uni-popup ref="popup0" type="center">
			<view
				style="width: 70vh;background-color: #fff;box-shadow: 1px 1px 1px #808080;border-radius: 4px;padding: 10px;font-size: small;">
				<view class="pop-header"
					style="display: flex;flex-direction: row;justify-content:space-between;align-items: start;border-bottom: 1px solid #808080;padding-bottom: 5px;">
					<text>{{title}} - {{currentAdmin.staff.nicename}}</text>
					<uni-icons type="closeempty" size="16" color="#fff" class="gl-button-icon" @tap="close"
						style="background-color: #dd524d;padding: 2px;border-radius: 2px;"></uni-icons>
				</view>
				<view class="pop-body" style="font-size: smaller;max-height: 50vh;display: flex;">
					<scroll-view scroll-y style="max-height: 50vh; max-width: 35%;">
						<view style="background-color: #f8f8f8;padding: 20px 0;">
							<view v-for="(group,gkey,gindex) in tmpData" :key="gindex">
								<view @tap="toggleSubmenu(gindex)" style="padding: 5px;">
									<uni-icons type="locked" size="12" color="#007aff"></uni-icons>
									<text style="margin-left: 5px; font-size: small;">{{ gkey }}</text>
								</view>
								<view v-if="currentMenu === gindex">
									<view v-for="(title,tkey,tindex) in group" :key="tindex"
										style="margin-left: 20px;padding: 5px;" @tap="toggleChild(tkey)">
										<text :class="{ 'currentItem': currentChild === tkey }"
											style="margin-left: 5px; font-size: small;">{{ tkey }}</text>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
					<scroll-view scroll-y style="max-height: 50vh;flex: 1;" :scroll-into-view="'title-'+currentScroll">
						<view
							style="background-color: #f8f8f8;padding: 20px 10px;flex:1;display: flex;flex-direction: column;justify-content:space-between; ">
							<checkbox-group @change="changeParme" style="display: flex;flex-direction: column;">
								<template v-for="(group,gkey,gindex) in tmpData" :key="gindex">
									<template v-for="(title,tkey,tindex) in group" :key="tindex">
										<view :id="'title-'+convertStr(tkey)"
											style="display: flex;flex-direction: column;padding: 10px 0;">
											<label v-for="(item, index) in title" :key="index" style="padding: 5px;">
												<checkbox :value="item.id+''" :checked="Boolean(item.auth)" :disabled="currentAdmin.id === sConf.auth.admin.id"/>
												{{item.act}}-{{item.info}}
											</label>
										</view>
									</template>
								</template>
							</checkbox-group>
						</view>
					</scroll-view>
				</view>
				<view class="pop-footer" style="border-top: 1px solid #808080; ">
					<view style="display: flex; justify-content: end;gap: 5px; padding: 10px 0;">
						<view v-if="detail" class="gl-button gl-button-success" @tap="submit">
							<uni-icons type="checkmarkempty" size="18" color="#fff"></uni-icons>
							<text style="font-size: small;">保存</text>
						</view>
						<view class="gl-button gl-button-error" @tap="close">
							<uni-icons type="closeempty" size="18" color="#fff"></uni-icons>
							<text style="font-size: small;">取消</text>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import md5 from 'js-md5';
	import utils from '@/common/utils.js'
	export default {
		name: "pop-admin-perms",
		mounted() {
			console.log('组件挂载');			
		},
		data() {
			return {
				sConf: getApp().globalData,
				currentMenu: null,
				currentChild: null,
				currentScroll: null,
				currentAdmin: null,
				currentPerms: null,
				tmpData: null,
				detail: null
			};
		},
		props: {
			title: {
				type: String
			}
		},
		methods: {
			open(e) {
				console.log('模态窗口', e);
				// console.log(this.sConf.auth);
				this.currentAdmin = e;
				this.hasAuthPerms(e.id);
				this.$refs.popup0.open();
			},
			close() {
				this.$refs.popup0.close();
			},
			hasAuthPerms(e) {
				console.log('加载权限');
				let pk = e ? e : null;
				utils.adminAuthViewList(this.sConf.host, this.sConf.auth.token, pk).then((res) => {
					// console.log('请求成功', res);
					if (res.rescode === 401) {
						this.logout();
					}
					if (res.rescode === 200) {						
						this.tmpData = res.resmsg;
					}
				});
			},
			toggleSubmenu(e) {
				this.currentMenu = e;
			},
			toggleChild(e) {
				this.currentChild = e;
				this.currentScroll = md5(e);
			},
			changeParme(e) {
				this.detail = e.detail;
			},
			convertStr(e) {
				return md5(e);
			},
			submit() {
				let data = {
					admin: this.currentAdmin.id,
					views: this.detail.value
				}
				utils.adminPermsViewPost(this.sConf.host, this.sConf.auth.token, data).then((res) => {
					// console.log('请求成功', res);
					if (res.rescode === 401) {
						this.logout();
					}
					if(res.rescode === 400){
						uni.showToast({
							title: '提交失败',
							icon: 'error'
						})						
					}
					if (res.rescode === 200) {
						this.close();
					}
				});
			}

		}
	}
</script>

<style lang="scss">
	.gl-button-icon:hover {
		opacity: 0.8;
		transform: scale(0.98);
	}

	.arrow-down {
		transform: rotate(90deg);
	}

	.currentItem {
		font-weight: bold;
	}
</style>